import styled from "@emotion/styled";
import { useState } from "react";
import { Icon } from "./lib";

export const ToTop = () => {
  const [topTop, setToTop] = useState(false);
  window.onscroll = () => {
    setToTop(window.scrollY !== 0);
  };

  const onBackTop = () => {
    window.scrollTo(0, 0);
  };

  return (
    <>
      {topTop ? (
        <ToTopBox onClick={onBackTop}>
          <Icon name={"icon-zhiding"} fontSize={"3rem"}></Icon>
        </ToTopBox>
      ) : undefined}
    </>
  );
};

const ToTopBox = styled.div`
  position: fixed;
  bottom: 10rem;
  cursor: pointer;
`;
